<template>
  <div class='qr-code-wrapper'>
    <div class='qr-code-box'>
      <span class='qr-code-title'>请长按或扫描二维码<br>关注我们</span>
      <img class='qr-code-img' :src="mpCodeUrl" v-show='mpCodeUrl'>
      <div class='qr-code-img-bg' v-show='!mpCodeUrl'></div>
      <div class='qr-code-close iconfont' @click='closeCode'>&#xe623;</div>
    </div>
  </div>
</template>
on
<script>
export default {
  data () {
    return {
      mpCodeUrl: ''
    }
  },
  methods: {
    closeCode () {
      this.$emit('close')
    },
    init () {
      let url = `${this.SERVICE_PORTAL}/${sessionStorage.getItem('appid')}`
      let param = {}
      this.$get(url, param).then(res => {
        if (res.code === 200 && res.data) {
          localStorage.setItem('wechatInfo', JSON.stringify(res.data))
        }
        let wechatInfo = JSON.parse(localStorage.getItem('wechatInfo'))
        if (wechatInfo && wechatInfo.qrcodeImg) {
          this.mpCodeUrl = wechatInfo.qrcodeImg
        }
      })
      // let wechatInfo = JSON.parse(localStorage.getItem('wechatInfo'))
      // if (wechatInfo && wechatInfo.qrcodeImg) {
      //   this.mpCodeUrl = wechatInfo.qrcodeImg
      //   return false
      // }
      // this.$_load.show()
      // let url = `${this.SERVICE_PORTAL}/${sessionStorage.getItem('appid')}/qrcode`
      // let param = {}
      // this.$get(url, param).then(res => {
      //   if (res.code === 200) {
      //     console.log('qrcode: ', res.data)
      //     this.mpCodeUrl = res.data
      //     setTimeout(() => {
      //       this.$_load.hide()
      //     }, 200)
      //   }
      // })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="stylus" scoped>
.qr-code-wrapper
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  z-index 1000
  background rgba(0,0,0,0.5)
  .qr-code-box
    box-sizing content-box
    width 200px
    height 200px
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    margin auto
    padding-top 50px
    background #ffffff
    border-radius 10px
    transform rotate(0deg) translateY(-30px)
    .qr-code-img, .qr-code-img-bg
      width 100%
      height 100%
      border-radius 0 0 10px 10px
    .qr-code-img-bg
      background #eee
    .qr-code-title
      display block
      position absolute
      left 0
      right 0
      top 14px
      text-align center
      line-height 20px
    .qr-code-close
      position absolute
      bottom -50px
      left 0
      right 0
      z-index 1
      margin auto
      width 26px
      height 26px
      line-height 25px
      border 1px solid #fff
      border-radius 50%
      color #fff
      text-align center
      font-size 10px
      opacity 0.6
</style>
